<template>
    <div class="plonebox">
        <div class="ploneleft">
            <div class="plimg">
                <img v-lazy="thesrc" alt="">
            </div>
        </div>
        <div class="ploneright">
            <div class="plonename">{{thename}}</div>
            <div class="plonecon">{{thecontent}}</div>
        </div>
        <div class="plonehot">
            {{thehot}}
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-icon2"></use>
            </svg>
        </div>
    </div>
</template>
<script>
export default {
    name:"plone",
    props:['thesrc','thename','thecontent','thehot'],
}
</script>
<style lang="less" scoped>
.plonebox{
    width: 100%;
    display:flex;
    position:relative;
    .ploneleft{
        width:12%;
        flex-shrink: 0;
        .plimg{
            font-size:0px;
            border-radius:50%;
            overflow:hidden;
            img{
                width:100%;
            }
        }
    }
    .ploneright{
        margin-left:10px;
        width:80%;
        border-bottom:1px solid #eee;
        .plonename{
            margin-top:8px;
            margin-bottom:10px;
            width:75%;
            color:#555;
            font-size:15px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .plonecon{
            line-height:20px;
            letter-spacing:1px;
            margin-bottom: 15px;
        }
        .plonehf{
            // margin:8px 0px;
            color:#4475b7;
            font-size:14px;
            line-height:20px;
            margin-bottom:7px;
        }
    }
    .plonehot{
        position:absolute;
        top:8px;
        right:0px;
        font-size:15px;
        color:#999;
        svg{
            font-size:18px;
        }
    }
}
.zxpl{
    font-size: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
    font-weight: 500;
}
</style>